<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Canvas | Auto.js 4.1.0 文档</title>
  <link rel="stylesheet" href="assets/fonts.css">
  <link rel="stylesheet" href="assets/style.css">
  <link rel="stylesheet" href="assets/sh.css">
  <link rel="canonical" href="https://nodejs.org/api/canvas.html">
</head>
<body class="alt apidoc" id="api-section-canvas">
  <div id="content" class="clearfix">
    <div id="column2" class="interior">
      <div id="intro" class="interior">
        <a href="/" title="返回首页">
          Auto.js
        </a>
      </div>
      <ul>
<li><a class="nav-documentation" href="documentation.html">关于本文档</a></li>
<li><a class="nav-http-www-w3school-com-cn-js-pro_js_syntax-asp" href="http://www.w3school.com.cn/js/pro_js_syntax.asp">W3CSchool - ECMAScript教程</a></li>
<li><a class="nav-http-es6-ruanyifeng-com-README" href="http://es6.ruanyifeng.com/#README">阮一峰 - ECMAScript 6教程</a></li>
</ul>
<div class="line"></div>

<ul>
<li><a class="nav-overview" href="overview.html">Overview - 综述</a></li>
<li><a class="nav-qa" href="qa.html">Q&amp;A - 常见问题</a></li>
<li><a class="nav-app" href="app.html">App - 应用</a></li>
<li><a class="nav-console" href="console.html">Console - 控制台</a></li>
<li><a class="nav-coordinates-based-automation" href="coordinates-based-automation.html">CoordinatesBasedAutomation - 基于坐标的操作</a></li>
<li><a class="nav-device" href="device.html">Device - 设备</a></li>
<li><a class="nav-dialogs" href="dialogs.html">Dialogs - 对话框</a></li>
<li><a class="nav-engines" href="engines.html">Engines - 脚本引擎</a></li>
<li><a class="nav-events" href="events.html">Events - 事件与监听</a></li>
<li><a class="nav-floaty" href="floaty.html">Floaty - 悬浮窗</a></li>
<li><a class="nav-files" href="files.html">Files - 文件系统</a></li>
<li><a class="nav-globals" href="globals.html">Globals - 一般全局函数</a></li>
<li><a class="nav-http" href="http.html">Http - HTTP</a></li>
<li><a class="nav-images" href="images.html">Images - 图片与图色处理</a></li>
<li><a class="nav-keys" href="keys.html">Keys - 按键模拟</a></li>
<li><a class="nav-media" href="media.html">Media - 多媒体</a></li>
<li><a class="nav-modules" href="modules.html">Modules - 模块</a></li>
<li><a class="nav-widgets-based-automation" href="widgets-based-automation.html">WidgetsBasedAutomation - 基于控件的操作</a></li>
<li><a class="nav-sensors" href="sensors.html">Sensors - 传感器</a></li>
<li><a class="nav-shell" href="shell.html">Shell - Shell命令</a></li>
<li><a class="nav-storages" href="storages.html">Storages - 本地存储</a></li>
<li><a class="nav-threads" href="threads.html">Threads - 多线程</a></li>
<li><a class="nav-timers" href="timers.html">Timers - 定时器</a></li>
<li><a class="nav-ui" href="ui.html">UI - 用户界面</a></li>
<li><a class="nav-https-developer-mozilla-org-zh-CN-docs-Mozilla-Projects-Rhino-Scripting_Java" href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/Rhino/Scripting_Java">Work with Java - 调用Java API</a></li>
</ul>
<div class="line"></div>

<ul>
<li><a class="nav-https-github-com-hyb1996-NoRootScriptDroid" href="https://github.com/hyb1996/NoRootScriptDroid">GitHub项目 &amp; Issue提交</a></li>
<li><a class="nav-http-autojs-org" href="http://autojs.org">Auto.js交流社区</a></li>
</ul>

    </div>

    <div id="column1" data-id="canvas" class="interior">
      <header>
        <h1>Auto.js 4.1.0 文档</h1>
        <div id="gtoc">
          <p>
            <a href="index.html" name="toc">索引</a> |
            <a href="all.html">查看全部</a>
          </p>
        </div>
        <hr>
      </header>

      <div id="toc">
        <h2>目录</h2>
        <ul>
<li><span class="stability_undefined"><a href="#canvas_canvas">Canvas</a></span><ul>
<li><span class="stability_undefined"><a href="#canvas_canvas_drawargb_a_r_g_b">canvas.drawARGB(a, r, g, b)</a></span></li>
<li><span class="stability_undefined"><a href="#canvas_canvas_draw">canvas.draw</a></span></li>
</ul>
</li>
</ul>

      </div>

      <div id="apicontent">
        <h1>Canvas<span><a class="mark" href="#canvas_canvas" id="canvas_canvas">#</a></span></h1>
<p>canvas提供了使用画布进行2D画图的支持，可用于简单的小游戏开发或者图片编辑。使用canvas可以轻松地在一张图片或一个界面上绘制各种线与图形。</p>
<p>canvas的坐标系为平面直角坐标系，以屏幕左上角为原点，屏幕上边为x轴正方向，屏幕左边为y轴正方向。例如分辨率为1920*1080的屏幕上，画一条从屏幕左上角到屏幕右下角的线段为:</p>
<pre><code>canvas.drawLine(0, 0, 1080, 1920, paint);
</code></pre><p>canvas的绘制依赖于画笔Paint, 通过设置画笔的粗细、颜色、填充等可以改变绘制出来的图形。例如绘制一个红色实心正方形为：</p>
<pre><code>var paint = new Paint();
//设置画笔为填充，则绘制出来的图形都是实心的
paint.setStyle(Paint.STYLE.FILL);
//设置画笔颜色为红色
paint.setColor(colors.RED);
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
canvas.drawRect(0, 0, 100, 100, paint);
</code></pre><p>如果要绘制正方形的边框，则通过设置画笔的Style来实现：</p>
<pre><code>var paint = new Paint();
//设置画笔为描边，则绘制出来的图形都是轮廓
paint.setStyle(Paint.STYLE.STROKE);
//设置画笔颜色为红色
paint.setColor(colors.RED);
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
canvas.drawRect(0, 0, 100, 100, paint);
</code></pre><p>结合画笔canvas可以绘制基本图形、图片等。</p>
<h2>canvas.drawARGB(a, r, g, b)<span><a class="mark" href="#canvas_canvas_drawargb_a_r_g_b" id="canvas_canvas_drawargb_a_r_g_b">#</a></span></h2>
<h2>canvas.draw<span><a class="mark" href="#canvas_canvas_draw" id="canvas_canvas_draw">#</a></span></h2>

      </div>
    </div>
  </div>
  <script src="assets/sh_main.js"></script>
  <script src="assets/sh_javascript.min.js"></script>
  <script>highlight(undefined, undefined, 'pre');</script>
  <!-- __TRACKING__ -->
</body>
</html>